<template>
	<el-card  class="box-card231">
		<template #header>
			<div style="display: flex;align-items: center;" class="card-header">
				
				<el-icon color="rgb(245, 108, 108)"><Document /></el-icon>
				&nbsp;
				<span style="color:rgb(245, 108, 108)">海外资料</span>

                <el-input  v-if="false" clearable v-model="input_str"  size="small" style="width: 30%;margin-left: 
                171px;" placeholder="请输入文档名称"></el-input>
			</div>
		</template>
		<vueJSX
    
	:data="treeData"
	:height="300"
  ></vueJSX>
		
	</el-card>
</template>

<script setup>
import vueJSX from "./vueJSX.vue";
import {Document} from '@element-plus/icons-vue'
import { onMounted, ref ,watch} from 'vue'
import {GetDepartmentFiles,GetDirectories,GetDirectory} from '../../../api/project'
import {DownloadDepartmentFile} from '../../../api/projectManage/projectList'
import Files from '../../../utils/checkFile'

let input_str = ref('')
let tableData = ref([])
let treeData = ref([{ DirAttVOList: [] }]);
let getTreeTableData = async () => {
	let path = await GetDirectory({directoryType:'海外资料'})
  let res = await GetDirectories({
	rootPath: path.data,
  });

  treeData.value = res;
};
let getTableData = async(data) => {
  let res = await GetDepartmentFiles(data)
  tableData.value = res
}
onMounted(()=>{
     getTreeTableData();
})


watch(input_str,async()=>{
    
    if(input_str.value){
        let res = await GetDepartmentFiles()
        let data = JSON.parse(JSON.stringify(res));
        tableData.value = data.filter(
        (v) =>
          v.file_name.includes(input_str.value) 
      );
    }else{
        getTableData({file_type:'海外资料'})
    }
})



</script>

<style scoped lang="scss">
.hober{
  cursor: pointer;	
}
.hober:hover{
	color: rgb(34, 171, 249);
	text-decoration: underline
}

	.card-header {
		display: flex;
		align-items: center;
		font-size: 17px;
		span {
			// background-color: aqua;
			
			border-radius: 4px;
			
			font-weight: 600;
		}
	}

	.project-info {
		display: flex;
		font-size: 14px;
		
		flex-direction: column;
		.project-info-item{
			margin-bottom: 10px;
		}
	}

	.box-card231 {
		width: 100%;
		::v-deep(.el-card__body) {
			padding: 5px;
		}
	}
</style>
